<!--
* @Auth: Manbuyulin
* @Date: 2023-04-18 17:56:05
* @Func: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>新建文件</title>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<script>
		//  需求：
		let arr = [2, 3, 4, 5, 3, 4, 6, 21, 212, '张三', '李四', '张三']


		//法一: ES6 set方法
		//set方法直接重组
		let arr2 = [...new Set(arr)];
		console.log(arr2); //[2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法二:filter()+index方法
		//fliter遍历数组如果存在元素.则返回.
		let arr3 = arr.filter((item, index) => {
			return arr.indexOf(item) === index;
		});
		console.log(arr3); // [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法三:inclcudes()+箭头函数+三目运算符
		//使用 reduce() 方法遍历原数组。在 reduce() 方法中，对于每一个元素 cur，如果当前元素已经存在于新数组中，则直接返回新数组；
		//否则，将该元素添加到新数组中，然后返回新数组。
		// let arr4 = arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
		// console.log(arr4); // [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']
		let arr4 = arr.reduce(function (prev, cur) {
			console.log(prev)
			
			if (prev.includes(cur)) {
				return prev;
			} else {
				return [...prev, cur];
			}
		}, []);


		//法四:for循环加includes()
		let arr5 = [];
		//使用 for 循环遍历原数组 arr
		for (let i = 0; i < arr.length; i++) {
			//判断arr6是否存在arr[i],不存添加元素
			if (!arr5.includes(arr[i])) {
				arr5.push(arr[i]);
			}
		}
		console.log(arr5); //  [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法五:indexOf()方法
		let arr6 = [];
		//使用 for 循环遍历原数组 arr
		for (let i = 0; i < arr.length; i++) {
			//判断arr6是否存在arr[i],不存添加元素
			if (arr6.indexOf(arr[i]) === -1) {
				arr6.push(arr[i]);
			}
		}
		console.log(arr6); // [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法六:双重数组法
		let arr7 = [];
		//使用 for 循环遍历原数组 arr，并定义变量 sed 表示当前元素是否已经存在于新数组中。
		for (let i = 0; i < arr.length; i++) {
			// 使用 for 循环遍历原数组 arr，并定义变量 sed 表示当前元素是否已经存在于新数组中。
			let sed = false;
			for (let j = 0; j < arr7.length; j++) {
				if (arr[i] === arr7[j]) {
					//内部再次使用 for 循环遍历新数组 arr7，判断当前元素是否已经存在于新数组中。如果存在，则标记变量 sed 为 true 并跳出内层循环。
					//时间复杂度老高了		
					sed = true;
					break;
				}
			}
			//如果变量 sed 的值为 false，则说明当前元素还没有存在于新数组中，因此将其添加到新数组中。
			if (!sed) {
				arr7.push(arr[i]);
			}
		}
		console.log(arr7); // [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法七:map对象
		//该方法先创建了一个 Map 对象，然后遍历数组，将数组中的元素作为键存储在 Map 对象中。
		//如果该元素已经存在于 Map 对象中，则不进行任何操作；否则，将该元素存储在 arr10Arr 数组中。
		let map = new Map();
		let arr8 = [];
		for (let i = 0; i < arr.length; i++) {
			if (!map.has(arr[i])) {
				map.set(arr[i], true);
				arr8.push(arr[i]);
			}
		}
		console.log(arr8); // [2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法八:Array.from 和 reduce 方法
		//该方法先使用 Set 对象对原数组进行去重，然后通过 Array.from 将 Set 对象转换为数组，
		//并最终使用 reduce 方法将这个数组展开成一个扁平化的数组。
		let arr9 = Array.from(new Set(arr)).reduce((prev, cur) => prev.concat(cur), []);
		console.log(arr9); //[2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法九:扩展运算符和 concat 方法
		//该方法先使用 Set 对象对原数组进行去重，然后通过扩展运算符将 Set 对象展开成一个数组，
		//最终使用 concat 方法将这个数组合并成一个新的数组。
		let arr10 = [].concat(...new Set(arr));
		console.log(arr10);  //[2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']


		//法十:
		// 该方法先创建了一个空数组 arr11，然后遍历原数组。在遍历过程中，使用 some() 方法判断当前元素是否已经存在于新数组中。
		// 如果不存在，则将该元素添加到新数组中。最终返回去重后的新数组。
		let arr11 = [];
		arr.forEach(item => {
			if (!arr11.some(ele => ele === item)) {
				arr11.push(item)
			}
		})
		console.log(arr11);  //[2, 3, 4, 5 4, 6, 21, 212, '张三', '李四']
	</script>
</body>

</html>